<template>
 <div class="user">
   <header>
     <ul>
       <li>
         <!-- <img src="" alt=""> -->
         假装这
         <br>是头像
       </li>
       <li>
         <van-button type="info" v-show="!token" size="mini" @click="$router.push('/login')">立即登录</van-button>
         <p>积分:129</p>
         <van-button type="info" v-show="token" size="mini" @click="loginOut">退出登录</van-button>
       </li>
     </ul>
   </header>
   <p class="rolling">
     <van-icon name="volume-o" />
     <marquee behavior="" direction="">阿巴阿巴阿巴阿巴阿巴~</marquee>
   </p>
   <p class="web"></p>
   <section>
     <p @click="$router.push('/myorder')">
       <van-icon name="notes-o" />
       <span>我的订单</span>
       <van-icon name="arrow" />
     </p>
     <ul>
       <li>
         <van-icon name="paid" />
         <span>待付款</span>
       </li>
       <li>
         <van-icon name="send-gift-o" />
         <span>待发货</span>
       </li>
       <li>
         <van-icon name="logistics" />
         <span>待收货</span>
       </li>
       <li>
         <van-icon name="comment-o" />
         <span>待评价</span>
       </li>
     </ul>
   </section>
   <p class="web"></p>
   <ul>
     <li>
       <van-icon name="gold-coin-o" class="icon-one"/>
       <span>我的余额</span>
     </li>
     <li>
       <van-icon name="edit" class="icon-one"/>
       <span>我的砍价</span>
     </li>
     <li>
       <van-icon name="coupon-o" class="icon-two"/>
       <span>我的礼券</span>
     </li>
     <li>
       <van-icon name="star-o" class="icon-two"/>
       <span>我的收藏</span>
     </li>
     <li>
       <van-icon name="location" class="icon-three"/>
       <span>我的地址</span>
     </li>
     <li>
       <van-icon name="service-o" class="icon-three"/>
       <span>联系客服</span>
     </li>
   </ul>
   <p class="web web-con">The work of Zhang Xuze</p>
 </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "",
  data() {
    return {
      token: $store.state.token
    };
  },
  mounted() {},
  methods: {
    loginOut() {
      this.clearToken();
      this.$toast.success("退出成功");
      this.$router.push("/login");
    },
    ...mapMutations(["clearToken"])
  },
  computed: {
    ...mapState(["token"])
  },
  watch: {}
};
</script>

<style scoped>
.web {
  width: 100%;
  height: 10px;
  background-color: #f5f5f5;
}
header {
  width: 100%;
  height: 150px;
  background-color: #c1b18f;
}
header > ul {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-end;
}
header > ul > li {
  display: flex;
  justify-content: center;
  align-items: center;
}
header > ul > li:first-child {
  width: 25%;
  height: 100%;
}
header > ul > li:last-child {
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
header > ul > li:last-child > p {
  width: 100px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  background-color: #b6a37d;
  padding: 0 0 0 6px;
  font-size: 14px;
  color: aliceblue;
}
.rolling {
  width: 100%;
  height: 54px;
  display: flex;
  align-content: center;
}
.rolling > .van-icon {
  display: inline-block;
  width: 54px;
  height: 54px;
  line-height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #db3b3b;
}
.rolling > marquee {
  height: 54px;
  line-height: 54px;
  font-size: 14px;
  color: #db3b3b;
}
section {
  width: 100%;
  height: 132px;
}
section > p {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
}
section > p > .van-icon:nth-child(1) {
  font-size: 20px;
  color: #f8be58;
  display: inline-block;
  width: 52px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
}
section > p > .van-icon:nth-child(3) {
  margin-left: 230px;
}
section > ul {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
section > ul > li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
section > ul > li > .van-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
section > ul > li > span {
  font-size: 14px;
}
ul:nth-child(6) {
  width: 100%;
  height: 160px;
  display: flex;
  flex-wrap: wrap;
}
ul:nth-child(6) > li {
  width: 32%;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
ul:nth-child(6) > li > .van-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  font-size: 28px;
  margin: 0 0 4px 0;
}
.icon-one {
  color: #f86650;
}
.icon-two {
  color: #edb449;
}
.icon-three {
  color: #5a9fec;
}
.web-con {
  height: 22px;
  font-size: 12px;
  color: #6d6d6d;
  text-align: center;
  line-height: 22px;
}
</style>